<template>
  <div ref="containerRef" class="container"></div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import { initEcharts, disposeEcharts } from "@/config/echartsUtil";
const containerRef = ref(null);
let myChart = null;
const init = () => {
  const option = {
    xAxis: {
      type: "category",
      boundaryGap: true, // x轴两侧是否有空隙
      data: ["2021年", "2022年", "2023年", "2024年", "2025年"],
      axisTick: {
        // 横坐标刻度
        // show: true
      },
    },
    grid: {
      top: "80", // 距离容器的距离
      left: "70",
      right: "70",
      bottom: "50",
    },
    legend: {
      // 图例
      // orient = horizontal  vertical
      orient: "horizontal",
      right: 30,
      top: 30,

      itemWidth: 7, // 图例图标的宽度
      itemHeight: 7, // 图例图标的高度

      align: "right",
      data: [
        {
          name: "同比增长",
          icon: "circle",
          textStyle: {
            color: "red",
            fontSize: "12px",
          },
        },
        {
          name: "年度统计",
          icon: "circle",
        },
      ],
    },
    tooltip: {
      // 鼠标移入时显示每项数据
      // trigger: "axis"
      // axisPointer: { type: "cross" }
    },
    yAxis: [
      // axisLabel: {
      //     // 刻度标签
      //     formatter: "{value} 元"
      //     // align: "left"
      //     // ...
      // },

      {
        type: "value",
        name: "产值规模（亿）",
        min: 0,
        max: 30,
        position: "left",
        axisLabel: {
          formatter: "{value} ml",
        },
      },
      {
        type: "value",
        name: "",
        min: 0,
        max: 30,
        position: "right",
        axisLabel: {
          formatter: "{value} %",
        },
        splitLine: {
          //坐标轴在 grid 区域中的分隔线。
          // show: true,
          lineStyle: {
            type: "dashed",
            color: "RGBA(54, 90, 156, 1)",
          },
        },
      },
    ],
    series: [
      {
        name: "同比增长",
        data: [10, 22, 28, 23, 19],
        type: "line",
        showSymbol: false, // 是否显示空心原点
        areaStyle: {
          // 折线区域样式
          color: "#dedede",
          opacity: 0.5,
        },
        lineStyle: {
          // 折线样式
          color: "green",
          width: 1,
        },
        // yAxisIndex: 0
      },
      {
        name: "年度统计",
        data: [25, 14, 23, 35, 10],
        type: "line",
        showSymbol: false,
        areaStyle: {
          color: "#ddd",
          opacity: 0.5,
        },
        lineStyle: {
          color: "yellow",
          width: 1,
        },
        // yAxisIndex: 1
      },
    ],
  };
  myChart = initEcharts(containerRef.value, option);
};
onBeforeUnmount(() => {
  //   销毁实例;

  disposeEcharts(myChart);
});
onMounted(() => {
  init();
});
</script>
<style lang="less" scoped></style>
